import {Text, Style, Icon, Fill, Stroke} from 'ol/style'

//页面操作交互
const selectStyle = new Style({
  fill: new Fill({
    color: 'red'
  }),
  stroke: new Stroke({
    color: '#e3b939',
    width: 2
  })
})

export default {
  data() {
    return {
      selected: null
    }
  },
  methods: {
    mapEventHandle() {
      // this.addOffLineLayer()
      //地图初始化后提交事件
      this.$emit('initMap', this.map)
      // 地图点击事件
      let _this = this
      this.map.on('click', function (e) {
        // 获取点击位置的Feature
        var feature = this.forEachFeatureAtPixel(
          [e.pixel[0], e.pixel[1]],
          function (feature, layer) {
            //地图区域特殊事件，特殊处理
            return feature
          }
        )
        _this.$emit('click', e)
        // console.log(_this.gisIns.toLonLat(e.coordinate[0],e.coordinate[1]))
        if (feature) {
          _this.$emit('clickMap', feature, e)
        }
      })

      this.map.on(['pointermove'], (evt) => {
        if (evt.dragging) {
          return
        }
        this.displayFeatureInfo(evt.pixel)
      })
    },
    //行政区域切换
    areaToggleColor(e) {
      let _this = this
      _this.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
        if (layer.code == 'jintang') {
          _this.selected = feature
          selectStyle.getFill().setColor('rgba(227,185,57,.3)')
          feature.setStyle(selectStyle)
        }
      })
    },
    //图层切换
    changeLayer(status, code) {
      this.gisIns.mapToggleLayer(status, code)
    },
    //添加一个离线图层
    addOffLineLayer() {
      this.gisIns.createGeoJson(
        '510105.json',
        'qingyangqu',
        {
          zIndex: 2,
          style: function (feature) {
            // let name = feature.get('NAME') || feature.get('name')
            return new Style({
              // text: new Text({
              //   text: name,
              //   font: 'bold 14px 宋体',
              //   fill: new Fill({
              //     color: 'rgba(27,191,228,0.5)'
              //   })
              // }),
              stroke: new Stroke({
                color: '#2f8d9f',
                width: 2
              }),
              fill: new Fill({
                color: 'rgba(27,191,228,0.2)'
              })
            })
          }
        },
        {
          // dataProjection: 'BD:09',
          // featureProjection: 'EPSG:4490'
        }
      )
    },

    //关闭所有弹窗
    closeAllOverLay() {
      this.gisIns.closeAllOverLay()
    },

    displayFeatureInfo(pixel) {
      const feature = this.map.forEachFeatureAtPixel(pixel, function (feature) {
        return feature
      })
      if (feature && feature.get('pointer')) {
        this.map.getTarget().style.cursor = 'pointer'
      } else {
        this.map.getTarget().style.cursor = ''
      }
    }
  }
}
